<template>
    <el-config-provider :locale="zhCn">
        <router-view></router-view>
    </el-config-provider>
</template>

<script setup>
import Qilin from "qilin-utils";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import {homePinia} from "@/store/home/index.js";
const homePiniaStore=homePinia();

// 生命周期逻辑区域
onMounted(()=>{
    window.addEventListener("resize",()=>{
        const isCollapse=homePiniaStore.getIsCollapse;
        if(Qilin.Element.getNodeWidth() <= 1000){ //当可视窗口的宽度小于1000px时，导航栏自动收缩
            if(!isCollapse){
                homePiniaStore.setIsCollapse(!isCollapse);
                homePiniaStore.setWidth(!isCollapse ? 4.571 : 14.286);
            };
        };
    });
});
</script>

<style lang="scss">
:root{
	--themeColor:#{$color-text-common}; //字体色
	--themeBgColor:#{$color-bg-common}; //背景色
	--themeBorderColor:#{$color-border}; //边框色
	--shadow:#{$color-shadow}; //阴影色
}
html,body,#app{
    font-size:100% !important; //浏览器默认大小为16px，本项目设置根元素默认字体大小为16px
}
html,body,#app{
    width:100%;
    height:100%;
	position:relative;
	font-family: $text-china-default,$text-english-default;
	color:$color-text-common;
    // letter-spacing: 1px;
}
*{
    @include QilinGeneral();
}
p{
    padding:0 !important;
    margin:0 !important;
}
/**
    使用多色图标时需要此样式
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icontouxiang-copy" />
    </svg>
*/
.icon{
    width:1rem;
    height:1rem;
    vertical-align: -0.15rem;
    fill:currentColor;
    overflow:hidden;
}
@media only screen and (min-width:1921px){
	html,body,#app{
		font-size:120% !important;
	}
}
@media only screen and (min-width:1537px) and (max-width:1920px){
	html,body,#app{
		font-size:100% !important;
	}
}
@media only screen and (max-width:640px){
	html,body,#app{
		font-size:75% !important;
	}
}
</style>
